/* Just for the example. Fee free to delete these three lines */
.pikachoose {
	width: auto;
	margin: 1.5em auto;
}

/* Style the thumbnails */
.pika-thumbs {
	padding: 0!important;
	margin: 0!important;
	list-style: none!important;
}
	.pika-thumbs li {
		background: #fafafa;
		width: 100px;
		height: 100px;
		float: left;
		padding: 0;
		margin: 0 5px 10px;
		border: 3px solid #ffffff;
		overflow: hidden;
		list-style-type: none;
		cursor: pointer;
	}
		.pika-thumbs li .clip {
			text-align: center;
			vertical-align: center;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
			.pika-thumbs li img { height: 100%; }
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage {
	text-align: center;
	background: #fafafa;
	margin: 0 auto 10px;
	width: auto;
	position: relative;
	overflow: hidden;
}
	.pika-stage a { display: block; }
		.pika-stage img {
			display: block;
			max-width: 100%;
		}
		.pika-stage .caption {
			font-size: 11px;
			text-align: right; 
			color: #fafafa;
			background: #000;
			background: rgba(0,0,0,0.75);
			padding: 10px;
			border: 1px solid #141414;
			position: absolute;
			bottom: 24px;
			right: 10px;
		}
			.pika-stage .caption p {
				padding: 0;
				margin: 0;
			}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
	.pika-imgnav a.previous, 
	.pika-imgnav a.next {
		text-indent: -2000px;
		background-color: transparent;
		background-repeat: no-repeat;
		display: block;
		height: 100%;
		width: 50%;
		top: 0;
		cursor: pointer;
		overflow: hidden;
	}
	
	.pika-imgnav a.previous {
		background-image: url(/concrete/themes/recursos/imaxes/estandar/elementos-xenericos/iconografia/ico-esp-galeria-esq.png);
		background-position: 5% 50%;
		left: 0;
	}
	.pika-imgnav a.next {
		background-image: url(/concrete/themes/recursos/imaxes/estandar/elementos-xenericos/iconografia/ico-esp-galeria-der.png);
		background-position: 95% 50%;
		right: 0;
	}
	.pika-imgnav a.play {background: url(../../assets/images/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
	.pika-imgnav a.pause {background: url(../../assets/images/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {
	display: none;
	width: 100%;
	margin: 10px 0 0 0;
	position: absolute;
	bottom: 10px;
	overflow: hidden;
}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip {
	display: none;
	font-size: 12px;
	background: #000;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
	padding: 3px;
	border: 3px solid #000;
	position: absolute;
}
.pika-counter {
	font-size: 11px;
	color: white;
	background: #000;
	background: rgba(0,0,0,0.7);
	padding: 3px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: absolute;
	bottom: 30px;
	left: 15px;
}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(../../assets/images/loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
	text-align:right; position:absolute; top:15px; right:15px; }


/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}